<template>
  <div class="c-bg-white c-pb100 c-minh c-fs24 c-fc-xblack">
    <div class="c-bg-white" v-if="detail != null">
      <div>
        <div class="c-text-hidden c-w100 c-maxh427">
          <img class="c-w100 imgCloseBig" :src="detail.saleCourseCover || detail.courseCover || require('../../../public/i/wap/edu/enlist.png')" alt="" />
        </div>
        <div class="c-fc-xblack c-lh48 c-pt30 c-ph24 c-pb30">
          <div class="c-fc-white c-fs20 c-pv4 c-ph10 c-br10 c-inline c-mr10" :class="detail.courseType == '体验课'?'c-bg-experience':'c-bg-formal'">{{detail.courseType=='体验课'?'体验课':'正式课'}}</div>
          <span class="c-fw600 c-fs28">{{detail.saleCourseName}}</span>
          <div class="c-fs24 c-lh36 c-fc-gray c-pt30" v-if="detail.courseType == '正式课' && detail.saleType == 1">有效期{{detail.validityType == 1 ? ": 长期有效" : (detail.status == "未开始"?'：未开始'+'（'+detail.effectTypeLabel+'）':detail.status == "进行中"? '至 ' + getChangeTime(detail.validityEndTime):('：' + getChangeTime(detail.validityStartTime) +' - '+ getChangeTime(detail.validityEndTime))) }}</div>
          <div class="c-fs24 c-lh36 c-fc-gray c-pt30" v-if="detail.courseType == '正式课' && detail.saleType == 2">有效期{{detail.validityType == 1 ? ": 长期有效" : (detail.status == "未开始"?'：'+expireTime+'（未开始，'+detail.effectTypeLabel+'）':detail.status == "进行中"? '至 ' + getChangeTime(detail.validityEndTime):('：' + getChangeTime(detail.validityStartTime) +' - '+ getChangeTime(detail.validityEndTime))) }}</div>
          <div class="c-fs24 c-lh36 c-fc-gray c-pt30" v-if="detail.courseType == '正式课' && detail.saleType == 3">有效期{{detail.validityType == 1 ? ": 长期有效" : (detail.status == "未开始"?'：未开始（' +getChangeTime(detail.validityStartTime) +' - '+ getChangeTime(detail.validityEndTime)+'）' :detail.status == "进行中"? '至 ' + getChangeTime(detail.validityEndTime):('：' + getChangeTime(detail.validityStartTime) +' - '+ getChangeTime(detail.validityEndTime))) }}</div>
        </div>
      </div>
    </div>
    <div class="c-hh20 c-bg-sgray c-w100 c-maxw640"></div>
    <div class="c-pv30 c-ph24 c-bg-white" v-if="detail != null">
      <div class="c-bd-b1 c-pb30 c-fc-gray c-flex-row c-aligni-center c-justify-sb">
        <span>课程信息</span>
        <div class="c-ww110 c-hh42 c-br21 c-lh42 c-lh42 c-fs20 c-fc-white c-textAlign-c" :class="changeNoticeStatus == 1 ? 'c-bg-ccc' : 'theme-bg-gradient'" @click="goFocus()" v-if="isShowNotice == 1">{{changeNoticeStatus==1 ? '关闭提醒' : '获取提醒'}}</div>
      </div>
      <div class="c-mt30 c-flex-row c-aligni-center">学员: {{detail.studentName}}</div>
      <div class="c-mt30" v-if="detail.saleType == 1 && detail.courseType == '正式课'">课时: {{detail.lessonNum}} (剩) / {{detail.stock}} (总)</div>
      <div class="c-mt30 c-text-ellipsis1" v-if="!!detail.scSpecName">规格: {{detail.scSpecName}} </div>
    </div>
    <div class="c-hh20 c-bg-sgray c-w100 c-maxw640" v-if="detail != null && ((detail.status == '未开始' && detail.courseType == '体验课') || (courseArr && courseArr !='' && courseArr !=null && courseArr.length!=0))"></div>
    <div class="c-pv30 c-ph24 c-bg-white" v-if="detail != null && ((detail.status == '未开始' && detail.courseType == '体验课') || (courseArr && courseArr !='' && courseArr !=null && courseArr.length!=0))">
      <div class="c-pb30">待上课程</div>
      <div v-if="detail.courseType == '体验课' && (courseArr =='' || courseArr ==null || courseArr.length==0)">
        <div class="iconfont c-fc-sgray c-fs100 c-textAlign-c">&#xe94a;</div>
        <div class="c-mt20 c-textAlign-c">机构还没有为你确定上课时间 </div>
      </div>
      <div class="c-box-shadowEdu c-w100 c-flex-row c-justify-sb c-aligni-center c-mb30 c-ph20 c-br10 c-pv30" v-if="courseArr && courseArr !='' && courseArr !=null && courseArr.length!=0" @click.stop="handleClickScheduleDetail(courseArr[index].courseId)">
        <div class="iconfont c-fs24" :class="index == 0 ? 'c-fc-gray imgCloseBig' : 'c-fc-smblue'" @click.stop="prev()" v-if="length>1">&#xe600;</div>
        <div class="c-w80 c-text-hidden">
          <div>时间: {{courseDetail.days > 0 ? `${courseDetail.startTime} - ${courseDetail.endTime}` : courseDetail.date}}</div>
          <div class="c-mt20 c-text-ellipsis1">课程: {{courseDetail.lessonName}} </div>
          <div class="c-mt20 c-text-ellipsis1" v-if="courseDetail.schoolName != null">校区: {{courseDetail.schoolName}}</div>
        </div>
        <div class="iconfont c-fs24" :class="index == length -1 ? 'c-fc-gray imgCloseBig' : 'c-fc-smblue'" @click.stop="next()" v-if="length>1">&#xe60e;</div>
      </div>
      <div class="theme-fc c-textAlign-c c-text-decoration-underline c-mt32" @click="appointmentCourse(1, detail.cid, detail.studentId)" v-if="length>1">查看全部待上课程</div>
    </div>
    <div class="c-hh20 c-bg-sgray c-w100 c-maxw640"></div>
    <div class="c-bg-white c-ph24 c-minh360">
      <div class="c-hh80 c-bd-b1 c-flex-row c-aligni-center c-fs24 c-fc-gray">课程详情</div>
      <div class="c-pv30" v-if="detail && detail.courseDetails" v-html="detail.courseDetails"></div>
    </div>
    <div class="c-pf c-p-b0 c-pz100 c-maxw640 c-w100 c-box-shadowEdu c-flex-row c-aligni-center c-pv20 c-bg-white c-ph120 c-justify-sb" v-if="detail != null">
      <div class="c-flex-column c-textAlign-c" @click="appointmentCourse(1, detail.cid, detail.studentId, detail.saleCourseId, detail.id)">
        <img src="../../../public/i/wap/edu/time_table.png" alt="" class="c-ww90 c-hh90">
        <div class="c-mt10">查看课表</div>
      </div>
      <div class="c-flex-column c-textAlign-c" @click="goTable(detail.id, detail.studentId,detail.saleCourseId)">
        <img src="../../../public/i/wap/edu/class_record.png" alt="" class="c-ww90 c-hh90">
        <div class="c-mt10">上课记录</div>
      </div>
    </div>
    <div v-if="detail != null && detail.status == '已结束'" class="c-hh20 c-bg-sgray c-w100 c-maxw640"></div>
    <div class="c-fs20 c-bg-white" v-if="detail != null && detail.status == '已结束'">
      <div class="c-fs28 c-pt30 c-textAlign-c">相关推荐</div>
      <div class="c-ww32 c-hh6 c-br4 theme-bg-gradient c-center c-mt30"></div>
      <div class="c-flex-row c-justify-sb c-flexw-wrap c-ph24">
        <div v-for="(item,ind) in recommendList" :key="ind" class="c-mt20 c-mb20 c-ww280 c-text-hidden" @click="goEduDetail(item.saleCourseId)">
          <div class="c-ww280 c-maxh180 c-text-hidden c-p">
            <img :src="$addXossFilter(item.image, require('@/assets/defult270.png'))" alt="" class="c-w100 c-maxh180 c-br10">
            <div class="c-pa c-p-t0 c-p-l0 c-ww80 c-hh30 c-lh30 c-fs20 c-fc-white c-br-tl10 c-br-br10 c-textAlign-c" :class="item.courseType == '体验课' ?'c-bg-experience':'c-bg-formal'">{{item.courseType == '体验课' ? '体验课':'正式课'}}</div>
          </div>
          <div class="c-fs22 c-text-ellipsis2 c-fw-b c-pt20">{{item.saleCourseName}}</div>
          <div class="c-fs20 c-flex-row c-justify-sb c-aligni-center c-mt20 ">
            <div class="theme-fc c-lh c-pt12 c-fs26 c-flex-row c-aligni-end" :class="Number(item.price) == 0 ? 'c-fs24' : 'c-fs26'">
              <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>
              {{item.price | moneyStr}}
            </div>
            <div v-if="item.stock > 0">剩余名额: {{item.stock}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="masker" v-if="isShowMasker" @click="closeMasker"></div>
    <div class="c-pf c-p-b0 c-p-l0 c-textAlign-c c-bg-white c-w100 c-br-tr10 c-br-tl10 c-pz1000" v-if="isShowRemindBox">
      <div class="iconfont c-pa c-p-r24 c-p-t24 c-fc-sgray c-fs20" @click="closeRemindBox">&#xe8fd;</div>
      <div class="c-mt30 c-fs28">关注公众号</div>
      <div class="c-mt80 c-fc-gray c-fs28">二维码标题二维码标题二维码标题</div>
      <div class="c-mt30 c-ww200 c-maxh210 c-text-hidden c-mlr-auto">
        <img :src="$addXossFilter(qrcode, require('@/assets/activity_defult.png'))" alt="" class="c-ww200 c-maxh210">
      </div>
      <div class="c-mt20 c-mb64 c-fc-gray">长按二维码，识别并关注</div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common";
let isClick = "";
export default {
  name: 'CourseDetail',
  components: {
  },
  props: [],
  filters: {
    formatStringTime(value) {
      if (value != "" && value != null && value != undefined) {
        return value.substr(0, 10).replace(/-/g, ".");
      } else {
        return value;
      }
    }
  },
  beforeCreate() {
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      detail: null,
      isShowNotice: false, // 是否显示面授课
      noticeStatus: false, // 关闭提醒  获取提醒
      changeNoticeStatus: "",
      isShowRemindBox: false,
      isShowMasker: false,
      reservationId: "",
      courseArr: [],
      courseDetail: {},
      index: 0,
      length: 0,
      qrcode: "",
      recommendList: [],
      orderSource: "",
      courseType: "",
      orderNo: "",
      courseId: "",
      saleCourseId: "",
      saleId: "",
      saleType: "",
      orderId: "", // 订单id
      expireTime: '', // 按时段，有效期
      studentId: '',
      scheduleListId: ''
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  computed: {
  },
  methods: {
    handleClickScheduleDetail(courseId) {
      this.$routerGo(this, "push", {
        path: "/edu/scheduleDetail",
        query: {
          courseId: courseId,
          studentId: this.studentId,
          scheduleListId: this.scheduleListId,
          isShowAppointment: 1, // 2有预约 和取消预约功能
          orderId: this.orderId,
          saleCourseId: this.saleId
        }
      })
    },
    getChangeTime(time) {
      if (time == null) {
        return '';
      } else {
        let currentYear = new Date().getFullYear();
        let tmpDate = time.split(' ')[0];
        let tmpTime = time.split(' ')[1];
        let tmpYear = tmpDate.split('-')[0];
        let timeString = '';
        if (tmpYear == currentYear) {
          timeString = tmpDate.split('-')[1] + '月' + tmpDate.split('-')[2] + '日';
        } else {
          timeString = tmpYear + '年' + tmpDate.split('-')[1] + '月' + tmpDate.split('-')[2] + '日';
        }
        return timeString + ' ' + tmpTime;
      }
    },
    getCourseDetail() {
      let $this = this;
      let order = !!this.$route.query.orderNo ? this.orderNo + "?type=orderNo" + "&saleCourseId=" + this.saleId + '&studentId=' + this.studentId : this.orderId + "?saleCourseId=" + this.saleId + '&studentId=' + this.studentId;
      utilJs.getMethod(global.apiurl + "educationSystem/course/" + order, res => {
        this.detail = res;
        if (this.detail.saleType == 2) {
          this.expireTime = this.detail.periodNum + (this.detail.units == 1 ? '天' : this.detail.units == 2 ? '月' : this.detail.units == 3 ? '季' : this.detail.units == 4 ? '年' : '')
        } else {
          this.expireTime = '';
        }
        this.saleType = res.saleType;
        this.orderId = res.id;
        this.courseId = res.cid;
        this.saleCourseId = res.saleCourseId;
        this.orderSource = res.orderSource;
        this.courseType = res.courseType;
        this.wechatShare();
        this.getRemind();
        this.getWaitCourse();
      }, failRes => {
        if (failRes.data.msg == '您与学员已解绑，现无权访问!') {
          let toPath = "/edu/faceTeaching";
          utilJs.getMethod(global.apiurl + 'members/jwRole', function (res) { // 获取当前用户身份，是教务系统的讲师还是学员
            localStorage.setItem("jwRole", res.role);
            if (res.role == 2) {
              toPath = '/edu/courseManagment';
            }
            $this.$routerGo($this, "push", { path: toPath });
          });
        } else {
          this.$routerGo(this, "replace", {
            path: "/edu/faceTeaching"
          });
        }
      })
    },
    // 是否显示面授课提醒
    getRemind() {
      utilJs.getMethod(global.apiurl + "educationSystem/studentCourse/" + this.orderId + "/isShowNotice", res => {
        this.isShowNotice = res.isShowNotice;
        // 后台开启是否显示面授课开关,才去提醒获取状态
        if (res.isShowNotice == 1) {
          this.getRemindStatus();
        }
      })
    },
    // 关闭提醒  获取提醒
    getRemindStatus() {
      if (this.isShowNotice == 0 || isClick) {
        return;
      }
      isClick = true;
      utilJs.getMethod(global.apiurl + "educationSystem/studentCourse/" + this.orderId + "/showNoticeStatus", res => {
        isClick = false;
        this.changeNoticeStatus = res.showNotice;
      }, failRes => {
        isClick = false;
      })
    },
    goFocus() {
      if (isClick) {
        return
      }
      isClick = true;
      this.changeNoticeStatus = this.changeNoticeStatus == 1 ? -2 : 1;
      utilJs.postMethod(global.apiurl + "educationSystem/studentCourse/switchNoticeStatus", { studentCourseId: this.orderId, noticeStatus: this.changeNoticeStatus }, res => {
        isClick = false;
        this.changeNoticeStatus = res.noticeStatus;
        if (res.isFollowedMp == 0 && res.noticeStatus == -2) {
          // 未关注且开启提醒 显示二维码用户去关注
          utilJs.postMethod(global.apiurl + "educationSystem/studentCourse/getMpQrCodeWithParams", { studentCourseId: this.orderId, noticeStatus: this.changeNoticeStatus }, res => {
            this.isShowMasker = true;
            this.isShowRemindBox = true;
            this.qrcode = res.qrcode;
          })
        }
      }, failRes => {
        isClick = false;
      })
    },
    closeRemindBox() {
      this.isShowMasker = false;
      this.isShowRemindBox = false;
    },
    getWaitCourse() {
      utilJs.getMethod(global.apiurl + "educationSystem/reservation/latest?courseId=" + this.courseId + "&reservationId=" + this.reservationId + "&saleCourseId=" + this.saleId + "&id=" + this.orderId, res => {
        this.courseArr = res;
        this.length = res.length;
        this.courseDetail = this.courseArr[this.index];
        this.reservationId = this.courseArr[this.index] ? this.courseArr[this.index].id : '';
        this.scheduleListId = this.courseArr[this.index] ? this.courseArr[this.index].scheduleListId : '';
        this.studentId = this.courseArr[this.index] ? this.courseArr[this.index].studentId : '';
      })
    },
    next() {
      this.index++;
      this.courseDetail = this.courseArr[this.index];
      this.reservationId = this.courseArr[this.index] ? this.courseArr[this.index].id : '';
      this.scheduleListId = this.courseArr[this.index] ? this.courseArr[this.index].scheduleListId : '';
      this.studentId = this.courseArr[this.index] ? this.courseArr[this.index].studentId : '';
      if (this.orderSource == "线上订单" && this.courseType == "正式课") {
        this.getRemindStatus();
      }
    },
    prev() {
      this.index--;
      this.courseDetail = this.courseArr[this.index];
      this.reservationId = this.courseArr[this.index] ? this.courseArr[this.index].id : '';
      this.scheduleListId = this.courseArr[this.index] ? this.courseArr[this.index].scheduleListId : '';
      this.studentId = this.courseArr[this.index] ? this.courseArr[this.index].studentId : '';
      if (this.orderSource == "线上订单" && this.courseType == "正式课") {
        this.getRemindStatus();
      }
    },
    appointmentCourse(type, cid, studentId, saleCourseId, id) {
      this.$routerGo(this, "push", {
        path: "/edu/courseTable",
        query: {
          comeFrom: type, //0 预约上课 1查看课表
          cid,
          studentId,
          saleCourseId,
          scid: this.orderId,
        }
      })
    },
    goTable(id, studentId, saleCourseId) {
      this.$routerGo(this, "push", {
        path: "/edu/appointmentList",
        query: {
          comeFrom: 0, //0 从课程详情的预约记录进来 1 从上课管理
          studentId,
          orderId: id,
          saleCourseId
        }
      })
    },
    getRecommend() {
      utilJs.getMethod(global.apiurl + "educationSystem/course/recommend", res => {
        this.recommendList = res;
      })
    },
    goEduDetail(saleCourseId) {
      this.$routerGo(this, "push", {
        path: "/edu/eduDetail",
        query: {
          id: saleCourseId,
        }
      })
    },
    closeMasker() {
      this.isShowMasker = false;
      this.isShowRemindBox = false;
    },
    //分享
    wechatShare: function () {
      let title = this.detail.saleCourseName;
      let shareImg = this.$addXossFilter(this.detail.saleCourseCover || "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/13/resource/admin-fe_lj7l_enlist_YeT7sJt3W2MmhWQreXZa.png" || window.localStorage.getItem("shareLogo"));
      let shareUrl = window.location.href.split("#")[0] + '#/edu/faceTeaching?faceType=1&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.detail.saleCourseName;
      let shareImg = this.$addXossFilter(this.detail.saleCourseCover || "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/13/resource/admin-fe_lj7l_enlist_YeT7sJt3W2MmhWQreXZa.png" || window.localStorage.getItem("shareLogo"));
      let shareUrl = window.location.href.split("#")[0] + '#/edu/faceTeaching?faceType=1&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
    setDocumentTitle("课程详情");
    if (!!this.$route.query.orderNo) {
      this.orderNo = this.$route.query.orderNo;
    }
    this.saleId = this.$route.query.saleCourseId ? this.$route.query.saleCourseId : '';
    this.orderId = this.$route.query.scid ? this.$route.query.scid : this.$route.query.orderId ? this.$route.query.orderId : '';
    isClick = "";
    this.orderSource = "";
    this.courseId = this.$route.query.courseId ? this.$route.query.courseId : '';
    this.studentId = this.$route.query.studentId ? this.$route.query.studentId : '';
    this.saleCourseId = "";
    this.courseType = "";
    this.changeNoticeStatus = "";
    this.isShowNotice = false;
    this.isShowMasker = false;
    this.reservationId = "";
    this.saleType = "";
    this.qrcode = "";
    this.index = 0;
    this.length = 0;
    this.courseArr = [];
    this.expireTime = '';
    this.recommendList = [];
    this.courseDetail = {};
    this.isShowRemindBox = false;
    this.detail = null;
    window.scrollTo(0, 0);
    this.getCourseDetail();
    this.getRecommend();
  },
  deactivated() {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
